<template>
  <div class="listbody">
    <div class="flexrowbetween flexwrapper" style="align-items: flex-start">
      <div class="flex mb_15">
        <el-button plain type="primary" size="mini" @click="handleAdd">添 加</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      ref="tablelayout"
      class="commtable"
    >
      <!-- @selection-change="handleSelectionChange" -->
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column align="center" label="ID" prop="id" width="80"></el-table-column>
      <el-table-column
        align="center"
        label="场次"
        prop="name"
      >
        <template slot-scope="scope">
          <span>{{scope.row.name || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="时间段"
        prop="score"
      >
        <template slot-scope="scope">
          <span>{{scope.row.start_sec}} - {{scope.row.end_sec}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否可用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#eee"
            :inactive-value="0"
            :active-value="1"
            @change="changeStatus($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="排序"
        prop="level"
      ></el-table-column>
      <el-table-column
        prop="created_at"
        label="操作"
        width="150"
        fixed="right"
        align="center"
      >
        <template slot-scope="scope">
          <div class="flex btnflex">
            <div
              class="commhover btn_green c_fff mr_10"
              @click="handleUpdate(scope.row)"
            >
              <i class="el-icon-edit f-14"></i> 编辑
            </div>
            <div
              class="commhover btn_yellow c_fff"
              @click="handleDelete(scope.row)"
            >
              <i class="el-icon-delete f-14"></i> 删除
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    /> -->
    
    <div class="flexend mt_30">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="580px"
      class="dialogheaderbg"
      :before-close="handleCloseAdd"
      append-to-body
      :close-on-click-modal='false'
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="时间段：" prop="time">
          <el-time-picker
            is-range
            v-model="form.time"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="排序：" prop="level">
          <el-input-number
            v-model="form.level"
            :min="1"
            :max="10000"
            label="排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示：" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCloseAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { moduleRoundIndex, moduleRoundCreate, moduleRoundEdit, moduleRoundDel, 
moduleRoundOpen, moduleRoundClose} from "@/api/sethome";
import { time_to_sec, sec_to_time } from '@/utils/validate'
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
      },
      total: 0,
      loading: false,
      tableData: [],
      title: "",
      open: false,
      form: {
        module_id:undefined,
        id:undefined,
        name: "",
        time: "",
        level: '',
        status: 1,
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间段", trigger: "change" }],
        level: [{ required: true, message: "排序值不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "change" }],
      },
    };
  },

  props:{
    rowid:{
      default:""
    }
  },

  created() {
    this.form.module_id = this.rowid
    this.getList();
  },

  methods: {
    getList() {
      this.loading = true;
      let params = {
        page: this.queryParams.page,
        num: this.queryParams.num,
        id: this.rowid
      }

      moduleRoundIndex(params).then((response) => {
        this.tableData = response.data.map(item=>({
          ...item,
          start_sec:sec_to_time(item.start_time),
          end_sec:sec_to_time(item.end_time)
        }));
        console.log('this.tableData：', this.tableData)
        // this.total = response.data.count;
        this.loading = false;
        // this.hform.status = response.data.status
      });
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    onSubmit() {
      this.$emit('close')
    },

    close(){
      this.$emit('close')
    },

    handleAdd() {
      this.title = "添加";
      this.reset();
      this.open = true;
    },
    reset() {
      this.form = {
        module_id: this.rowid,
        name: "",
        time: "",
        level: 1,
        status: 1,
        id: undefined
      };
      this.resetForm("form");
    },

    handleCloseAdd() {
      this.open = false;
    },

    handleUpdate(row){
      this.title = "编辑";
      this.reset();
      this.form.level = row.level
      this.form.name = row.name
      // this.form.time = 
      this.form.status = row.status
      this.form.id = row.id
      this.open = true;
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        let params = {
          module_id:this.form.module_id,
          name: this.form.name,
          start: time_to_sec(this.form.time[0]),
          end: time_to_sec(this.form.time[1]),
          level: this.form.level,
          status: this.form.status
        }
        if(this.form.id){
          moduleRoundEdit({...params,id: this.form.id}).then(res=>{
            this.$modal.msgSuccess("编辑成功");
            this.handleCloseAdd()
            this.getList()
          })
        }else{
          moduleRoundCreate(params).then(res=>{
            this.$modal.msgSuccess("添加成功");
            this.handleCloseAdd()
            this.getList()
          })
        }
      });
    },

    changeStatus(val,row){
      if(val){
        this.$modal.confirm('是否开启该数据项').then(function() {
          return moduleRoundOpen({
            id:row.id,
          });
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("开启成功");
        }).catch(() => {
          row.status = val ? 0 : 1
        });
      }else{
        this.$modal.confirm('是否隐藏该数据项').then(function() {
          return moduleRoundClose({
            id:row.id,
          });
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess('关闭成功');
        }).catch(() => {
          row.status = val ? 0 : 1
        });
      }
    },


    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.id;
      this.$modal.confirm('是否确认删除编号为"' + infoIds + '"的数据项？').then(()=>{
        return moduleRoundDel({id:infoIds});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  },
};
</script>